/**
 * Created by qinrui on 2017/11/10
 * vs对比图
 */
import React, { Component } from "react";
import PropTypes from "prop-types";
import './index.less';

export default class contrastChart extends Component {
    constructor (props) {
        super(props);
    }
    /*
    data = {
        title, //标题
        type, //类型（周报／月报）
        showTime, //时间范围
        totalEntry, //入职人数
        totalDismission, //离职人数
        startNum, //期初人数
        endNum, //期末人数
    }
    */
    static propTypes = {
       data: PropTypes.object
    };

    render(){
        const { title='', type='', showTime='', totalEntry=0, totalDismission='', startNum='', endNum='' } = this.props.data;
        const widthValues = Number(totalEntry) / ( Number(totalEntry) + Number(totalDismission) ) ;
        
        return (
            <div className="contrast-chart">
                {
                    title && 
                    <div className="contrast-chart-header">
                        <div className="contrast-chart-header-content">{ title }</div>
                        {
                            showTime &&
                            <div className="contrast-chart-header-extra">{ showTime }</div>
                        }
                    </div>
                }

                <div className="contrast-chart-body">
                    <div className="contrast-chart-body-colorBox">
                        <div className="week-box" style={{width: `${ totalEntry === 0 && totalDismission === 0 ? 50 : widthValues*100 }%`}}></div>
                        <div className="month-box"></div>
                    </div>
                    <div className="contrast-chart-body-content">
                        <div className="item">
                            <div className="item-lable">{ type }入职</div>
                            <div className="item-value">{ totalEntry }</div>
                        </div>
                        <div className="item right">
                            <div className="item-lable">{ type }离职</div>
                            <div className="item-value">{ totalDismission }</div>
                        </div>
                    </div>
                </div>
                
                <div className="contrast-chart-footer">
                    <div className="contrast-chart-footer-content">
                        <span className="label">期初人数</span> 
                        <span className="num">{ startNum }</span>
                    </div>
                    <span className="center-line"></span>
                    <div className="contrast-chart-footer-content right">
                        <span className="label">期末人数</span>  
                       
                       {/* {
                            startNum !== endNum  && 
                            <span className="arrow">
                                { 
                                    endNum > startNum
                                    ?  <img src="https://img.alicdn.com/tfs/TB1XFdma5qAXuNjy1XdXXaYcVXa-29-32.png" />
                                    :  <img src="https://img.alicdn.com/tfs/TB1dplma5qAXuNjy1XdXXaYcVXa-29-32.png" />
                                }
                            </span>
                        } */}
                        <span className={`num`}>
                            {endNum}
                        </span>
                    </div>
                </div>
            </div>
        )
    }
} 